<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container" style="display: flex;flex-direction: column;gap: 5px;">
      <el-card class="one-card">
        <div slot="header" style="display: flex;gap: 10px;align-items: center;">
          <label>出库单号</label>
          <!-- <el-input v-model="material.qty" clearable placeholder="数量" style="width: 185px;" /> -->
          <el-select v-model.trim="selectOrder" filterable clearable placeholder="请选择" @change="searchDetail">
            <el-option
              v-for="item in outboundList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-button type="success" icon="el-icon-search" size="mini">查询</el-button> -->
        </div>
        <div>
          <el-table ref="refTable" v-loading="loading" max-height="500px" :data="list" :row-class-name="rowClassName" style="width: 100%" @selection-change="updateChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="productNo" label="物料编码" />
            <el-table-column prop="partnerProductNo" label="客户物料编码" />
            <el-table-column prop="wantQty" label="数量">
              <template slot-scope="scope">
                {{ scope.row.wantQty }}
              </template>
            </el-table-column>
            <el-table-column prop="qty" label="关联工单数量" />
            <el-table-column prop="expectedOutQty" label="预计出库数量" />
            <el-table-column prop="actualOutQty" label="实际出库数量" />
          </el-table>
        </div>
      </el-card>
      <el-card class="two-card">
        <div slot="header" style="display: flex;justify-content: space-between;">
          <div>库存物料明细</div>
          <div>
            <el-button type="primary" icon="el-icon-box" :disabled="secondSelectList.length === 0" :loading="btn.outbound" @click="confirmOutbound">出库</el-button>
          </div>
        </div>
        <div>
          <el-table ref="refTable" v-loading="loadingTwo" max-height="500px" :data="selectList" style="width: 100%" @selection-change="secondSelect">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="productNo" label="物料编码" />
            <el-table-column prop="parentPalletCode" label="母托编码" />
            <el-table-column prop="parentPalletType" label="母托类型">
              <template slot-scope="scope">
                {{ dict.label.parentPallet_Type[scope.row.parentPalletType] }}
              </template>
            </el-table-column>
            <el-table-column prop="partnerProductNo" label="客户物料编码" />
            <el-table-column prop="qty" label="库存数量" />
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                {{ dict.label.material_status[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column prop="batchCode" label="批次号" />
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { outboundOrderListAPI, getDetailListAPI, selectOrderAPI, outboundAPI } from '@/api/work/outBoundCreate'
export default {
  name: 'TailBox',
  dicts: ['material_status', 'parentPallet_Type'],
  data() {
    return {
      selectOrder: '',
      outboundList: [],
      list: [],
      selectList: [],
      originOrder: '',
      loading: false,
      loadingTwo: false,
      selectedRow: null,
      secondSelectList: [],
      btn: {
        outbound: false
      }
    }
  },
  mounted() {
    this.getOutboundList()
  },
  methods: {
    async getOutboundList() {
      const res = await outboundOrderListAPI()
      if (res.result === 'OK') {
        // console.log(res)
        this.outboundList = res.data.map(item => {
          return {
            label: item,
            value: item,
            index: item
          }
        })
      }
    },
    async searchDetail(e) {
      // console.log(e)
      if (e) {
        if (e !== this.originOrder) {
          this.list = this.list.filter(item => item.outboundOrder !== this.originOrder)
        }
        const submitForm = {
          outBoundCode: this.selectOrder
        }
        try {
          this.loading = true
          const res = await getDetailListAPI(submitForm)
          if (res.result === 'OK') {
            this.originOrder = this.selectOrder
            res.data.forEach(item => {
              this.list.push({
                ...item,
                wantQty: item.qty,
                outboundOrder: this.selectOrder,
                flag: ''
              })
            })
          }
        } finally {
          this.loading = false
        }
      } else {
        this.list = this.list.filter(item => item.outboundOrder !== this.originOrder)
        this.originOrder = ''
      }
    },
    rowClassName(row) {
      // console.log(row.row)
      if (this.selectedRow && row.row !== this.selectedRow) {
        return 'disabled-row'
      }
      return ''
    },
    async updateChange(val) {
      // console.log(val)
      if (val.length === 0) {
        this.selectedRow = null
        this.selectList = []
        this.secondSelectList = []
        return
      }
      this.selectedRow = val[0]
      try {
        this.loadingTwo = true
        const res = await selectOrderAPI(this.selectedRow)
        console.log(typeof res.data)
        if ((typeof res.data) === 'object') {
          this.selectList = res.data
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.loadingTwo = false
      }
    },
    secondSelect(row) {
      console.log(row)
      this.secondSelectList = row
    },
    async confirmOutbound() {
      const submitForm = {
        parentPalletAndMaterialDtoList: this.secondSelectList,
        productOutBoundOrderDetail: this.selectedRow
      }
      console.log(submitForm)
      try {
        this.btn.outbound = true
        const res = await outboundAPI(submitForm)
        if (res.result === 'OK') {
          this.$message.success(res.message)
          this.selectOrder = ''
          this.outboundList = []
          this.list = []
          this.selectList = []
          this.originOrder = ''
          this.selectedRow = null
          this.secondSelectList = []
          this.getOutboundList()
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.btn.outbound = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
// ::v-deep .has-gutter {
//   .el-checkbox__inner {
//     display: none !important;
//   }
// }
::v-deep .el-table__header-wrapper .el-checkbox,
::v-deep .el-table__header-wrapper .el-checkbox__inner {
  visibility: hidden;
  pointer-events: none;
}
::v-deep .disabled-row .el-checkbox {
  display: none;
}
// .one-card:hover {
//   box-shadow: 0 4px 8px 8px rgba(0, 0, 0, 0.1);
// }
// .two-card:hover {
//   box-shadow: 0 4px 8px 8px rgba(0, 0, 0, 0.1);
// }
</style>
